<template>
  <div class="mall-home-container">
    <el-carousel
      :interval="4000"
      type="card"
      style="max-width: 1225px; margin: 0 auto"
    >
      <el-carousel-item v-for="item in swiperList" :key="item.carouselId">
        <el-image
          style="width: 100%; height: 100%"
          :src="item.picImg"
        />
      </el-carousel-item>
    </el-carousel>
    <div class="home-ad"></div>
    <div class="mall-main">
      <div class="home-box-hd">
        <div class="home-title">猜你喜欢</div>
      </div>
      <div class="home-box-bd">
        <MallList :list="recommendList" :isMore="true"></MallList>
      </div>
      <div>
        <div class="home-box-hd">
          <div class="home-title">居家生活</div>
        </div>
        <div class="home-box-bd">
          <div class="home-promo-list">
            <router-link to>
              <img :src="require('../assets/imgs/home-furniture.png')" />
            </router-link>
          </div>
          <MallList :list="furnitureList" :isMore="true"></MallList>
        </div>
      </div>
      <div>
        <div class="home-box-hd">
          <div class="home-title">数码专区</div>
        </div>
        <div class="home-box-bd">
          <div class="home-promo-list">
            <router-link to>
              <img :src="require('../assets/imgs/home-phone.png')" />
            </router-link>
          </div>
          <MallList :list="digitalList" :isMore="true"></MallList>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { swiperList } from '@/assets/data/swiper'
import MallList from '@/components/MallList'
import { itemTypeConstant } from '@/utils/constant'
import { mixin } from '@/mixins'
import { SPACE, selectPage, selectPageByWord, selectPageByForeignId } from '@/api/baseApi'
export default {
  mixins: [mixin],
  components: {
    MallList
  },
  data() {
    return {
      swiperList: [], // 首页轮播图
      digitalList: [],
      furnitureList: [],
      recommendList: []
    }
  },
  activated() {
    this.swiperList = swiperList
    this.findItemRecommend()
    this.findItemByTypeName()
  },
  methods: {
    ...mapGetters(['getUser']),
    // 查询分类专区的商品列表
    async findItemByTypeName() {
      selectPageByWord(SPACE.item, 0, 10, itemTypeConstant.digital).then(res => {
        this.digitalList = res.state === 200 ? res.data.records : []
      })
      selectPageByWord(SPACE.item, 0, 10, itemTypeConstant.furniture).then(res => {
        this.furnitureList = res.state === 200 ? res.data.records : []
      })
    },
    // 查询推荐的商品列表
    async findItemRecommend() {
      const user = this.getUser()
      if (user) {
        selectPageByForeignId(SPACE.itemRecommend, 0, 9, user.id).then(res => {
          this.recommendList = res.state === 200 ? res.data.records : []
        })
      } else {
        selectPage(SPACE.item, 0, 9).then(res => {
          this.recommendList = res.state === 200 ? res.data.records : []
        })
      }
    }
  }
}
</script>
<style scoped>
.mall-home-container {
  padding: 20px 0;
}

.home-ad {
  margin: 20px auto;
  width: 100%;
  max-width: 1225px;
  height: 99px;
  background-image: url("../assets/imgs/banner.jpg");
  background-repeat: no-repeat;
}

.home-box-hd {
  height: 58px;
  margin: 20px 0 0 0;
}

.home-box-hd .home-title {
  float: left;
  font-size: 22px;
  font-weight: 200;
  line-height: 58px;
  color: #333;
}

.home-box-hd .more {
  float: right;
}

.home-box-hd .more a {
  font-size: 16px;
  line-height: 58px;
  color: #424242;
}

.home-box-hd .more a:hover {
  color: #ff6700;
}

.home-box-bd {
  height: 615px;
}

.home-box-bd .home-promo-list {
  float: left;
  height: 615px;
  width: 234px;
  margin-right: 10px;
}

.home-box-bd .home-promo-list img {
  width: 234px;
}
</style>
